<template>
  <contentModel
    title="货源供应商"
    class="content-box"
    :has-footer="false"
    @close="closed"
  >
    <div :class="screenClass">
      <table-container
        v-model:columns="columns"
        v-model:is-fullscreen="isFullscreen"
        :loading="isLoading"
        :all-columns="allColumns"
        @refresh="dataRefresh"
      >
        <template #container-side>
          <a-button
            v-if="type === '2' && props.activetabval === '1'"
            type="primary"
            :class="rowKeyslist.length > 0 ? 'hascolor' : 'nocolor'"
            :disabled="rowKeyslist.length > 0 ? false : true"
            @click="dellist"
            >删除</a-button
          >
        </template>
        <editTable
          v-model:selectedKeys="selectedKeys"
          :columns="columns"
          :pagination="true"
          :data="renderData"
          :loading="isLoading"
          row-key="id"
          :scroll="scroll"
          :show-add="false"
          :row-selection="rowSelection"
          @selection-change="selectionchange"
        >
          <template
            v-if="type === '2' && props.activetabval === '1'"
            #operate="{ record }"
          >
            <span class="opbtn" @click="delone(record)">删除</span>
          </template>
        </editTable>
      </table-container>
    </div>
  </contentModel>
</template>

<script setup lang="ts">
  import { ref, reactive, defineEmits, defineProps, PropType } from 'vue';
  import lodash from 'lodash';
  import { Message } from '@arco-design/web-vue';
  import contentModel from '@/common/components/content-model/index.vue';
  import useFullScreen from '@/common/hooks/fullScreen';
  import { delSupplier } from '@/api/supplier/inquiry-list-create';
  import editTable from '@/common/components/edit-table/index.vue';
  import tableContainer from '@/common/components/table-container/index.vue';
  import { info } from '@/common/utils/modal-promise';
  import { tableRenderConfig } from './tableComp/baseTableConfig';

  const { isFullscreen, screenClass } = useFullScreen();

  const props = defineProps({
    conte: {
      type: Array as PropType<any[]>,
      default: () => {
        return [];
      },
    },
    listtab: {
      type: Object,
    },
    type: {
      type: String,
    },
    activetabval: {
      type: String,
    },
  });
  const scroll = {
    x: 1000,
    y: 200,
  };
  const columns: any = ref([]);
  const tableObj: any = ref([]);
  const renderData = ref<any[]>([]);
  const isLoading = ref<boolean>(true);
  const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
  });
  const rowKeyslist: any = ref([]);
  const selectedKeys = ref([]);
  const allColumns: any = ref([]);

  const emit = defineEmits(['closeDrawer', 'getDatas']);
  const gettableColums = () => {
    const activeKeys = props.listtab;
    const array = Object.entries(activeKeys).map(([key, value]) => [
      parseInt(key, 10),
      value,
    ]);
    tableObj.value = array.map((item) => item[1]);
    tableObj.value.forEach((v: any) => {
      Object.keys(tableRenderConfig).forEach((k) => {
        if (v === k) {
          columns.value.push(tableRenderConfig[k]);
        }
      });
    });
    allColumns.value = lodash.cloneDeep(columns.value);
  };
  const dataRefresh = () => {
    isLoading.value = true;
    emit('getDatas');
  };
  const getData = async () => {
    isLoading.value = true;
    renderData.value = props.conte;
    isLoading.value = false;
  };

  // 批量删除
  const dellist = async () => {
    handelDel(selectedKeys.value);
  };

  // 单个删除
  const delone = async (record: any) => {
    handelDel([record.id]);
  };
  const handelDel = async (list: any) => {
    await info({
      title: '提示',
      titleAlign: 'start',
      content: '删除后，数据将无法恢复，请确实是否删除',
      closable: true,
      modalClass: 'tips-modal',
      okText: '确认删除',
      hideCancel: false,
      cancelText: '取消',
    });
    const res = (await delSupplier(list)) as any;
    if (res.code === 200) {
      Message.success('删除成功！');
      selectedKeys.value.length = 0;
      emit('getDatas');
    }
  };

  // 取消
  const closed = () => {
    emit('closeDrawer');
  };

  const selectionchange = (rowKeys: string[]) => {
    console.log(rowKeys, '已选中内容');
    rowKeyslist.value = rowKeys;
  };

  getData();
  gettableColums();

  defineExpose({
    getData,
  });
</script>

<style lang="less" scoped>
  .nocolor {
    background-color: #d9dee7 !important;
  }

  .nocolor:hover {
    background-color: #d9dee7 !important;
  }

  .hascolor {
    background-color: #d9dee7;
    border: 1px solid #ccc;
  }

  .opbtn {
    color: #1e89ff;
    cursor: pointer;
  }

  .collapse-btn {
    ::v-deep(.arco-space-item) {
      margin-right: 5px !important;
    }

    ::v-deep(.arco-btn-size-medium) {
      padding: 0;
    }
  }
</style>

<style lang="less">
  .content-model.content-box {
    padding: 0;

    .content-body .content-con {
      padding: 0 !important;

      .header-con {
        padding-top: 0 !important;
      }
    }

    .table-container-con {
      padding: 0 !important;
    }
  }
</style>
